import React, { createRef, PureComponent } from 'react'

export default class App extends PureComponent {
  constructor() {
    super()

    this.state = {}

    this.helloRef = createRef()

    this.pEl = null
  }
  handleClick() {
    // 1. 在React元素上绑定一个ref字符串
    // console.log(this.refs.pRef)

    // 2. 提前创建好ref回显，createRef()，并将创建好的ref对象绑定到元素上
    // console.log(this.helloRef.current)

    console.log(this.pEl)
  }
  render() {
    return (
      <div>
        <p ref="pRef">Hello Ref</p>
        <p ref={this.helloRef}>Hello Ref</p>
        <p ref={el => this.pEl = el}>Hello Ref</p>
        <button onClick={() => this.handleClick()}>获取DOM</button>
      </div>
    )
  }
}
